<template>
  <el-dialog
    title="公告详情"
    :visible.sync="dialogVisible"
    width="60%">
    <div class="announcement-detail">
      <div class="announcement-header">
        <h3 class="announcement-title">{{ announcement.title }}</h3>
        <div class="announcement-meta">
          <el-tag :type="getTypeTagType(announcement.type)" size="small">
            {{ announcement.type }}
          </el-tag>
          <el-tag :type="getPriorityTagType(announcement.priority)" size="small">
            {{ getPriorityText(announcement.priority) }}
          </el-tag>
          <span class="publish-time">创建时间: {{ announcement.createdAt }}</span>
          <span v-if="announcement.startTime" class="start-time">生效时间: {{ announcement.startTime }}</span>
          <span v-if="announcement.endTime" class="end-time">过期时间: {{ announcement.endTime }}</span>
          <span class="view-count">阅读量: {{ announcement.viewCount || 0 }}</span>
        </div>
      </div>
      
      <el-divider></el-divider>
      
      <div class="announcement-content">
        <pre>{{ announcement.content }}</pre>
      </div>
      
      <div v-if="announcement.isPinned" class="announcement-flags">
        <el-tag type="warning">置顶</el-tag>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <el-button type="primary" @click="handleEdit">编 辑</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AnnouncementDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    announcement: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    },
    announcement: {
      handler(val) {
        if (val) {
          // console.log('详情原始数据:', val)
          // 确保数据格式正确
          this.formatData(val)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 编辑公告
    handleEdit() {
      this.dialogVisible = false
      this.$emit('edit', this.announcement)
    },
    
    // 获取公告类型标签样式
    getTypeTagType(type) {
      const typeMap = {
        '通知': 'primary',
        '维护': 'info',
        '活动': 'success',
        '其他': 'warning'
      }
      return typeMap[type] || ''
    },
    
    // 获取优先级标签样式
    getPriorityTagType(priority) {
      const priorityMap = {
        0: 'info', // 普通
        1: 'warning', // 重要
        2: 'danger' // 紧急
      }
      return priorityMap[priority] || 'info'
    },
    
    // 获取优先级文本
    getPriorityText(priority) {
      const priorityMap = {
        0: '普通',
        1: '重要',
        2: '紧急'
      }
      return priorityMap[priority] || '普通'
    },
    
    // 格式化数据，确保字段命名符合组件要求
    formatData(data) {
      // 确保使用大驼峰命名
      if (data.created_at !== undefined && !data.createdAt) data.createdAt = data.created_at
      if (data.updated_at !== undefined && !data.updatedAt) data.updatedAt = data.updated_at
      if (data.start_time !== undefined && !data.startTime) data.startTime = data.start_time
      if (data.end_time !== undefined && !data.endTime) data.endTime = data.end_time
      if (data.view_count !== undefined && !data.viewCount) data.viewCount = data.view_count
      if (data.publisher_id !== undefined && !data.publisherId) data.publisherId = data.publisher_id
      
      return data
    }
  }
}
</script>

<style scoped>
.announcement-detail {
  padding: 0 20px;
}

.announcement-header {
  margin-bottom: 20px;
}

.announcement-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.announcement-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #909399;
}

.announcement-meta > * {
  margin-right: 15px;
  margin-bottom: 5px;
}

.announcement-content {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 20px;
  word-break: break-word;
}

.announcement-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
}

.announcement-flags {
  margin-top: 20px;
}
</style> 